<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>表单验证</title>
        <style>
            form {
                width: 400px;
                border: 10px solid pink;
                padding: 20px;
            }

            label {
                display: block;
                height: 80px;
                position: relative;
            }

            input {
                height: 30px;
                font-size: 24px;
                padding-left: 20px;
            }

            label > span {
                position: absolute;
                left: 0;
                top: 35px;
                font-size: 20px;
                color: red;
                display: none;
            }
        </style>
    </head>
    <body>
        <form>
            <label>
                用户名: <input class="username" type="text" />
                <!-- 数字字母开头6～12位 忽略大小写 -->
                <span>请按照规则填写用户名</span>
            </label>
            <label>
                密码: <input class="password" type="text" />
                <!-- 数字字母下划线 6～12位 -->
                <span>请按照规则填写密码</span>
            </label>
            <label>
                手机号: <input class="phone" type="text" />
                <!-- 11位数字即可 -->
                <span>请按照规则填写手机号</span>
            </label>
            <label>
                邮箱: <input class="email" type="text" />
                <!-- 6～12位 开头为数字大小写字母 中间为数字字母下划线均可-->
                <!-- @ 只接收qq 163 sina -->
                <!-- com或者cn -->
                <span>请按照规则填写邮箱</span>
            </label>
            <input type="button" value="完善资料" />
        </form>
        <script>
            let form = document.querySelector("form");
            form.addEventListener("input", function (e) {
                let item = e.target.className;
                let reg;
                if (item === "username") {
                    reg = /^[0-9a-zA-Z]\w{5,11}$/;
                } else if (item === "password") {
                    reg = /^\w{6,12}$/;
                } else if (item === "phone") {
                    reg = /^\d{11}$/;
                } else {
                    reg = /^[0-9a-zA-Z]{6,16}@(qq|163|sina)\.(com|cn)$/;
                }
                e.target.nextElementSibling.style.display = reg.test(
                    e.target.value
                )
                    ? "none"
                    : "block";
            });
        </script>
    </body>
</html>
